<md-progress-linear md-mode="indeterminate" ng-show="dockerRegistryListController.isLoading"></md-progress-linear>
<div ng-show="!dockerRegistryListController.isLoading">
  <md-content class="registry-management-content">

    <che-list-header che-input-placeholder="Search"
                     che-search-model="dockerRegistryListController.registryFilter.username"
                     che-on-search-change="dockerRegistryListController.onSearchChanged(str)"
                     che-hide-search="dockerRegistryListController.registries.length === 0"
                     che-add-button-title="Add Registry"
                     che-on-add="dockerRegistryListController.showEditRegistryDialog($event, {})"
                     che-delete-button-title="Delete"
                     che-on-delete="dockerRegistryListController.deleteSelectedRegistries()"
                     che-hide-delete="dockerRegistryListController.cheListHelper.isNoItemSelected"
                     che-hide-header="dockerRegistryListController.cheListHelper.visibleItemsNumber === 0">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="column" layout-gt-xs="row"
             layout-align="start center"
             class="che-checkbox-area">
          <div layout="row" layout-align="start center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="Registry list" md-theme="default"
                         ng-checked="dockerRegistryListController.cheListHelper.areAllItemsSelected"
                         ng-click="dockerRegistryListController.cheListHelper.changeBulkSelection()"></md-checkbox>
          </div>
        </div>
        <div flex hide-xs layout-gt-xs="row"
             layout-align="start center"
             class="che-list-item-details">
          <che-list-header-column flex-gt-xs="50"
                                  che-sort-value="dockerRegistryListController.registryOrderBy"
                                  che-sort-item="url"
                                  che-column-title="Address"></che-list-header-column>
          <che-list-header-column flex-gt-xs="25"
                                  che-sort-value="dockerRegistryListController.registryOrderBy"
                                  che-sort-item="username"
                                  che-column-title="Username"></che-list-header-column>
          <che-list-header-column flex-gt-xs="25"
                                  che-column-title="Actions"></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list flex ng-if="dockerRegistryListController.registries && dockerRegistryListController.cheListHelper.visibleItemsNumber > 0">
      <che-list-item
              ng-repeat="registry in dockerRegistryListController.cheListHelper.getVisibleItems() | orderBy:dockerRegistryListController.registryOrderBy"
              flex-gt-sm="100" flex="33"
              ng-mouseover="hover=true"
              ng-mouseout="hover=false">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="che-list-item-row">
          <div layout="row"
               layout-align="start center"
               class="che-checkbox-area">
            <che-list-item-checked ng-model="dockerRegistryListController.cheListHelper.itemsSelectionStatus[registry.url]"
                                   ng-click="dockerRegistryListController.cheListHelper.updateBulkSelectionStatus()"
                                   che-aria-label-checkbox="Registry {{registry.url}}"></che-list-item-checked>
          </div>
          <div flex
               layout-xs="column" layout-gt-xs="row"
               layout-align-gt-xs="start center"
               layout-align-xs="start start"
               class="che-list-item-details">
            <div flex-gt-xs="50"
                 class="che-list-item-name">
              <span class="che-xs-header noselect" hide-gt-xs>Address</span>
              <a ng-href="{{registry.url}}" class="che-hover registry-url" target="_blank">{{registry.url}}</a>
            </div>
            <div flex-gt-xs="25">
              <span class="che-xs-header noselect" hide-gt-xs>Username</span>
              <span class="registry-user-data">{{registry.username}}</span>
            </div>
            <div flex-gt-xs="25">
              <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
                  <span class="che-list-actions">
                      <div ng-click="dockerRegistryListController.showEditRegistryDialog($event, registry)" uib-tooltip="Edit registry">
                        <span class="material-design icon-ic_mode_edit_24px"></span>
                      </div>
                  </span>
            </div>
          </div>
        </div>
      </che-list-item>
    </che-list>
    <div class="che-list-empty">
        <span ng-show="dockerRegistryListController.registries.length > 0 && dockerRegistryListController.cheListHelper.visibleItemsNumber === 0">
          No registries found.
        </span>
      <span ng-show="dockerRegistryListController.registries.length === 0">There are no registries.</span>
    </div>
  </md-content>
</div>
